<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <!-- 1. 引入vue库 -->
  <script src="../js/vue.js"></script>
  <script>
    // 2. 创建Vue的实例
    new Vue({
      // 指定用于显示动态界面的根元素
        // 方式一: 指定对应的选择器
        // 方式二: 指定对应的元素对象
      el: '#app',
      // data: 指定可变的N个数据
        // 方式一: 包含属性数据的对象
        // 方式二: 返回包含数据的对象的函数
      data: {
        msg: 'Hello Atguigu!'
      },
      // template: 用来指定要显示的界面
      // template的值: 包含了HTML和vue语法的字符串 ==> 统一称为: vue模板, 简称: 模板
      // 它会替换掉页面中的el元素, 而不是插入  ==>意味着不能给el元素添加样式
      // 缺点: 编写过程没有提示, 代码没有高亮 => 不太方便编写和阅读
      template: `
      <div>
        <p>{{ msg }}</p>  
      </div>
      `
    })
  </script>
</body>
</html>